<template>
  <div v-if="tabsList.length">
    <div class="home-title pt-32 pb-16">解盘观点速递</div>
    <div class="theme-card">
      <tabs :tabs="tabsList" :active="activeTab" @change="tabChange"></tabs>
      <div v-for="(item, index) in liveInfoList" :key="index">
        <div v-if="loadList.includes(index)" v-show="index === activeTab">
          <div class="theme-icon" :class="'icon-' + tabsList[index].id"></div>
          <ReviewsContainer :info="item"></ReviewsContainer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 列表和标题的展示，这里做了不用插槽的简单实现，因此每个模块要单独处理
import tabs from '@/components/common/Tab.vue';
import ReviewsContainer from '@/components/live/ReviewsContainer.vue';
export default {
  name: 'ViewsCard',
  components: { tabs, ReviewsContainer },
  data() {
    return {
      tabsList: [],
      // 已加载过的列表
      loadList: [0],
      liveInfoList: [],
      activeTab: 0,
    };
  },
  methods: {
    tabChange(index) {
      this.activeTab = index;
      window.statConf.click('textlive.tab');
      if (!this.loadList.includes(index)) {
        this.loadList.push(index);
      }
    },
    init(tab, info) {
      // 首页传入数据
      this.tabsList = _t.deepClone(tab);
      this.liveInfoList = _t.deepClone(info);
    },
  },
};
</script>

<style lang="less" scoped>
.theme-card {
  overflow: hidden;
}
.theme-icon {
  display: block;
  position: absolute;
  top: 1.1rem;
  right: 0.46rem;
}
</style>
